<template>
	<view class="audit-records">
		<view class="label">审核记录</view>
		<view class="input">
			<timeline>
				<timelineItem
            :color="getColor(index)" v-for="(it, index) in auditLogList" :key='index'
            :class="{last:index === auditLogList.length-1}">

					<view class="tripItem">
						<view class="title">
							<text class="step-name">
								{{ it.stepname }}
							</text>
							<text class="create-date">
								{{it.createdate}}
							</text>
						</view>

						<view class="title">
							<text class="username">
								{{ it.username }}
							</text>
							<text class="create-date">
								{{it.auditname}}
							</text>
						</view>

						<view class="title" v-if="it.auditmsg">
							<text class="username">
								{{ it.auditmsg }}
							</text>
						</view>
						<view class="tips"></view>
					</view>
				</timelineItem>
			</timeline>
		</view>
	</view>
</template>

<script>
	import timeline from '@/components/chenbin-timeline/timeLine.vue'
	import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'

	export default {
		props: ['auditLogList'],
		data() {
			return {

			};
		},
		components: {
			timeline,
			timelineItem
		},
    methods:{
      getColor(index) {
        if (index === 0) {
          if (this.done) {
            return '#10be28'
          } else {
            return '#ec6817'
          }
        } else {
          return '#10be28'
        }
      },
    }
	}
</script>

<style lang="less">
	.audit-records {
		position: relative;
		background: #FFFFFF;
		padding: 10px;
		margin-bottom: 10px;

		.label {
			font-size: 16px;
			position: relative;
		}

		.input {
			margin-top: 20rpx;

			.title {
				justify-content: space-between;
				align-items: center;
				display: flex;
				margin-bottom: 20rpx;

				.step-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.create-date {
					color: #999;
				}
			}
		}
	}
</style>
